<style lang="less">
@import "login.less";
@import "../animate.less";
</style>

<template>
  <div class="login" @keydown.enter="handleLogin">
    <div class="login-bg">
      <img v-for="(item,i) in loginPics" :class="{active:item.active}" :key="i" :src="item.pic">
    </div>
    <div class="login-con">
      <Card :bordered="false">
        <p slot="title">
          <Icon type="log-in"></Icon>智能考勤管理系统
        </p>
        <div class="form-con">
          <Form ref="loginForm" :model="form" :rules="rules">
            <FormItem prop="userName">
              <Input v-model="form.userName">
                <span slot="prepend">
                  <Icon :size="16" type="person"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input v-model="form.password" type="password">
                <span slot="prepend">
                  <Icon :size="14" type="locked"></Icon>
                </span>
              </Input>
            </FormItem>
            <FormItem>
              <Button @click="handleLogin" type="primary" long>登录</Button>
            </FormItem>
          </Form>
        </div>
      </Card>
    </div>
    <div class="copyRight">V{{version}}</div>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import { login } from "../../controllers/account";
import ME from "./login.js";

import loginPic1 from "src/images/loginBack1.png";
import loginPic2 from "src/images/loginBack2.png";
import loginPic3 from "src/images/loginBack3.png";
import loginPic4 from "src/images/loginBack4.png";
import config from "src/../package.json";

export default {
  data() {
    return {
      form: {
        userName: "",
        password: ""
      },
      rules: {
        userName: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      },
      loginPics: [
        {
          pic: loginPic1,
          active: false
        },
        {
          pic: loginPic2,
          active: false
        },
        {
          pic: loginPic3,
          active: false
        },
        {
          pic: loginPic4,
          active: false
        }
      ],
      index: 0,
      version: config.version
    };
  },
  computed: {
    imgCnt: function() {
      return this.loginPics.length;
    }
  },
  mounted() {
    this.handleChange();
  },
  methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          ME.login(this.form.userName, this.form.password).then(
            res => {
              console.log(res)
              Cookies.set("user", res.data);
              // this.$store.commit('setToken', user.token);
              this.$router.push({
                name: "home_index"
              });
            },
           
            res => {
              this.$Message.error(res.msg);
            }
          );
        }
      });
    },
    handleChange() {
      this.index = Math.floor(Math.random() * this.imgCnt);
      this.loginPics[this.index].active = true;
      setInterval(() => {
        this.loginPics[this.index].active = false;
        let cnt = Math.ceil(Math.random() * (this.imgCnt - 1));
        this.index = (this.index + cnt) % 4;
        this.loginPics[this.index].active = true;
      }, 60000);
    }
  }
};
</script>
